<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70vw" :fullscreen="true">
    <el-descriptions column="3" border size="large" v-loading="dataLoading">
      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Tools />
            </el-icon>
            设备名称
          </div>
        </template>
        {{ detailsInfo.equipmentName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Connection />
            </el-icon>
            设备编码
          </div>
        </template>
        {{ detailsInfo.code }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Operation />
            </el-icon>
            规格型号
          </div>
        </template>
        {{ detailsInfo.equipmentModel }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <OfficeBuilding />
            </el-icon>
            所属部门
          </div>
        </template>
        {{ detailsInfo.deptName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <CreditCard />
            </el-icon>
            设备分类
          </div>
        </template>
        {{ detailsInfo.equipmentClassifyName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <ChromeFilled />
            </el-icon>
            设备状态
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.EQUIPMENT_STATUS" :value="detailsInfo.equipmentStatus" />
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Operation />
            </el-icon>
            设备类型
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.EQUIPMENT_STATUS" :value="detailsInfo.equipmentType" />
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Lightning />
            </el-icon>
            设备功率
          </div>
        </template>
        {{ detailsInfo.equipmentPower }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Coin />
            </el-icon>
            设备重量
          </div>
        </template>
        {{ detailsInfo.equipmentWeight }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <ElementPlus />
            </el-icon>
            设备吨位
          </div>
        </template>
        {{ detailsInfo.equipmentTonnage }}
      </el-descriptions-item>



      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <LocationFilled />
            </el-icon>
            安装位置
          </div>
        </template>
        {{ detailsInfo.installPosition }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            安装日期
          </div>
        </template>
        {{ detailsInfo.installDate }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            投产日期
          </div>
        </template>
        {{ detailsInfo.productionDate }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Orange />
            </el-icon>
            单位
          </div>
        </template>
        {{ detailsInfo.unit }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <School />
            </el-icon>
            设备厂家
          </div>
        </template>
        {{ detailsInfo.equipmentProducer }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Avatar />
            </el-icon>
            联系人
          </div>
        </template>
        {{ detailsInfo.contacts }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Iphone />
            </el-icon>
            联系电话
          </div>
        </template>
        {{ detailsInfo.contactsNumber }}
      </el-descriptions-item>



      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Brush />
            </el-icon>
            使用状态
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.USED_TYPE" :value="detailsInfo.useType" />
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            最近一次保养时间
          </div>
        </template>
        {{ detailsInfo.maintainDatetime ? formatDate(new Date(detailsInfo.maintainDatetime)) : '' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            下次保养时间
          </div>
        </template>
        {{ detailsInfo.nextMaintainDatetime ? formatDate(new Date(detailsInfo.nextMaintainDatetime)) : '' }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Document />
            </el-icon>
            备注
          </div>
        </template>
        {{ detailsInfo.remark }}
      </el-descriptions-item>


    </el-descriptions>


  </Dialog>
</template>
<script lang="ts" setup>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('设备详细信息') // 弹窗的标题
import { propTypes } from '@/utils/propTypes'
import { RepairRequestApi, RepairRequest } from '@/api/business/repairrequest'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import { EquipmentManageApi, EquipmentManage } from '@/api/business/equipmentmanage'
const message = useMessage() // 消息弹窗

defineOptions({ name: 'MaintenanceInformationView' })

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap.large,
  }
})

const detailsInfo = ref({
  id: undefined,
  code: undefined,
  equipmentName: '',
  deptId: undefined,
  equipmentClassify: undefined,
  equipmentClassifyName: undefined,
  deptName: undefined,
  equipmentStatus: undefined,
  equipmentType: undefined,
  equipmentModel: undefined,
  equipmentPower: undefined,
  equipmentWeight: undefined,
  equipmentTonnage: undefined,
  installPosition: undefined,
  installDate: undefined,
  productionDate: undefined,
  unit: undefined,
  equipmentProducer: undefined,
  contacts: undefined,
  contactsNumber: undefined,
  useType: undefined,
  maintainDatetime: undefined,
  remark: undefined,
  nextMaintainDatetime: undefined
})

const dataLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
/** 打开弹窗 */
const openDetailInfo = async (id?: number) => {

  // 修改时，设置数据
  if (id) {
    try {
      dataLoading.value = true
      const res = await EquipmentManageApi.getEquipmentManage(id);
      if (res) {
        dialogVisible.value = true
        detailsInfo.value = await EquipmentManageApi.getEquipmentManage(id)
      } else {
        message.error("该设备已被删除,无法查看详细信息");
        dialogVisible.value = false
        return
      }
    } finally {
      dataLoading.value = false
    }
  }
}

defineExpose({ openDetailInfo }) // 提供 openDetailInfo 方法，用于打开弹窗显示详细信息



</script>
